import React, { useState, useRef } from 'react';
import { fetchAIAsswer } from '../../services/chat';

const CopyModal = ({ visible, link, onClose }) => {
  const [selectedPlatform, setSelectedPlatform] = useState(null);
  const [promotionCopy, setPromotionCopy] = useState('');
  const [isAILoading, setIsAILoading] = useState(false);
  const copyInputRef = useRef(null);

  if (!visible) return null;

  const selectPlatformAndGenerate = async (platform) => {
    setSelectedPlatform(platform);
    setIsAILoading(true);
    setPromotionCopy('');

    // 平台风格配置
    const platformConfigs = {
      moments: {
        name: '朋友圈',
        prompt: `生成适合朋友圈的中医理疗推广文案，风格亲切自然像朋友分享，
                 带适当emoji（如💆‍♀️、✨），80-100字，突出推拿、艾灸等服务优势，
                 解决亚健康问题，结尾用「推广链接」作为占位符`
      },
      xiaohongshu: {
        name: '小红书',
        prompt: `生成适合小红书的中医理疗推广文案，开头吸引眼球，中间分点讲优势，
                 用数字或符号分隔，结尾带3-5个相关话题标签，120-150字，突出专业性，
                 结尾用「推广链接」作为占位符`
      },
      weibo: {
        name: '微博',
        prompt: `生成适合微博的中医理疗推广文案，语言活泼简洁，带互动性语句，
                 如"谁懂啊！"，结尾带1-2个话题，80-120字，突出效果，
                 结尾用「推广链接」作为占位符`
      }
    };

    try {
      const { prompt } = platformConfigs[platform];
      const aiResponse = await fetchAIAsswer(prompt);
      setPromotionCopy(aiResponse.replace('推广链接', link));
    } catch (error) {
      console.error(`生成${platform}文案失败:`, error);
      // 平台专属备用文案
      const backupCopies = {
        moments: `💆‍♀️最近肩颈太难受了，去本草轩做了次推拿，师傅手法超专业！
                  按完整个人都轻松了，还体验了艾灸，温温热热的特别舒服～
                  推荐给久坐的朋友们，扫码注册有优惠：${link}`,
        xiaohongshu: `💥打工人必看！我的肩颈救星找到了！
                    1️⃣ 本草轩的推拿太绝了，精准按到酸痛点
                    2️⃣ 艾灸驱寒效果明显，做完手脚都暖了
                    3️⃣ 环境干净舒适，师傅都是持证上岗
                    真心推荐！扫码预约：${link}
                    #中医理疗 #肩颈放松 #打工人养生`,
        weibo: `谁懂啊！天天加班脖子快断了😭 还好发现了本草轩理疗坊，
                一次推拿+艾灸直接满血复活！打工人快冲！
                扫码注册：${link} #中医养生 #理疗推荐`
      };
      setPromotionCopy(backupCopies[platform]);
    } finally {
      setIsAILoading(false);
    }
  };

  const copyCurrentCopy = () => {
    if (!selectedPlatform) return;
    copyInputRef.current.select();
    document.execCommand('copy');
    alert(`${selectedPlatform === 'moments' ? '朋友圈' : 
           selectedPlatform === 'xiaohongshu' ? '小红书' : '微博'}文案复制成功！`);
  };

  return (
    <div className="qr-modal-overlay">
      <div className="qr-modal copy-modal">
        <div className="qr-modal-header">
          <h3>选择推广平台</h3>
          <button className="close-btn" onClick={onClose} disabled={isAILoading}>×</button>
        </div>
        
        {/* 平台选择按钮组 */}
        <div className="platform-select-group">
          <button
            onClick={() => selectPlatformAndGenerate('moments')}
            disabled={isAILoading}
            className={`platform-btn ${selectedPlatform === 'moments' ? 'active' : ''}`}
          >
            朋友圈
          </button>
          <button
            onClick={() => selectPlatformAndGenerate('xiaohongshu')}
            disabled={isAILoading}
            className={`platform-btn ${selectedPlatform === 'xiaohongshu' ? 'active' : ''}`}
          >
            小红书
          </button>
          <button
            onClick={() => selectPlatformAndGenerate('weibo')}
            disabled={isAILoading}
            className={`platform-btn ${selectedPlatform === 'weibo' ? 'active' : ''}`}
          >
            微博
          </button>
        </div>
        
        {/* 文案内容区域 */}
        <div className="qr-modal-content">
          {!selectedPlatform ? (
            <div style={{ textAlign: 'center', padding: '30px 0', color: '#666' }}>
              请选择需要生成的推广文案平台
            </div>
          ) : isAILoading ? (
            <div className="ai-loading-container">
              <div className="loading-spinner"></div>
              <p className="loading-text">
                正在生成{selectedPlatform === 'moments' ? '朋友圈' : 
                         selectedPlatform === 'xiaohongshu' ? '小红书' : '微博'}文案...
              </p>
            </div>
          ) : (
            <textarea
              ref={copyInputRef}
              value={promotionCopy}
              readOnly
              rows={selectedPlatform === 'xiaohongshu' ? 10 : 8}
              className="copy-textarea"
            />
          )}
        </div>
        
        {/* 复制按钮 */}
        {selectedPlatform && !isAILoading && (
          <div className="qr-modal-footer">
            <button className="save-qr-btn" onClick={copyCurrentCopy}>
              复制{selectedPlatform === 'moments' ? '朋友圈' : 
                   selectedPlatform === 'xiaohongshu' ? '小红书' : '微博'}文案
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default CopyModal;
